<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS Text Decoration Test: text-decoration-thickness length rounding up
        </title>

        <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
        <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
        <link rel="match" href="reference/text-decoration-thickness-length-rounding-ref.tentative.html">

        <meta name="assert" content="text-decoration-thickness length is rounded up to 2px">

        <style>
            table {
                border: 3px solid gray;
                border-collapse: collapse;
            }

            th,
            td{
                border: 2px solid gray;
                padding: 10px;
                text-align: center;
            }

            .one_point7_px {
                text-decoration-thickness: 1.7px;
            }

            .solid {
                text-decoration-style: solid;
            }

            .double {
                text-decoration-style: double;
            }

            .dotted {
                text-decoration-style: dotted;
            }

            .dashed {
                text-decoration-style: dashed;
            }

            .wavy {
                text-decoration-style: wavy;
            }

            .underline {
                text-decoration-line: underline;
            }

            .line_through {
                text-decoration-line: line-through;
            }

            .overline {
                text-decoration-line: overline;
            }
        </style>
    </head>

    <body>
        <h1>
            Test passes if text-decoration-thickness length is rounded to 2px
        </h1>

        <table>
            <thead>
                <tr>
                    <th rowspan="2">
                        Line Type
                    </th>
                    <th colspan="5">
                        Line Style
                    </th>
                </tr>
                <tr>
                    <th>
                        Solid
                    </th>
                    <th>
                        Double
                    </th>
                    <th>
                        Dotted
                    </th>
                    <th>
                        Dashed
                    </th>
                    <th>
                        Wavy
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>
                        Underline
                    </th>
                    <td class="one_point7_px solid underline">
                        Thickness test.
                    </td>
                    <td class="one_point7_px double underline">
                        Thickness test.
                    </td>
                    <td class="one_point7_px dotted underline">
                        Thickness test.
                    </td>
                    <td class="one_point7_px dashed underline">
                        Thickness test.
                    </td>
                    <td class="one_point7_px wavy underline">
                        Thickness test.
                    </td>
                </tr>
                <tr>
                    <th>
                        Line-through
                    </th>
                    <td class="one_point7_px solid line_through">
                        Thickness test.
                    </td>
                    <td class="one_point7_px double line_through">
                        Thickness test.
                    </td>
                    <td class="one_point7_px dotted line_through">
                        Thickness test.
                    </td>
                    <td class="one_point7_px dashed line_through">
                        Thickness test.
                    </td>
                    <td class="one_point7_px wavy line_through">
                        Thickness test.
                    </td>
                </tr>
                <tr>
                    <th>
                        Overline
                    </th>
                    <td class="one_point7_px solid overline">
                        Thickness test.
                    </td>
                    <td class="one_point7_px double overline">
                        Thickness test.
                    </td>
                    <td class="one_point7_px dotted overline">
                        Thickness test.
                    </td>
                    <td class="one_point7_px dashed overline">
                        Thickness test.
                    </td>
                    <td class="one_point7_px wavy overline">
                        Thickness test.
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
